<template>
  <div class="flex flex-col justify-content items-center bg-white px-[6px] py-[16px] bottom-[330px] rounded-[4px] gap-y-[16px] overflow-hidden">
    <px-button :disabled="!imgLoaded || !canZoomIn" size="large" link :icon="Plus" @click="zoomIn" />
    <px-slider v-model="scale" vertical height="100px" :min="1" :max="3" :step="0.2" @change="applyScale" />
    <px-button class="rotate-90" :disabled="!imgLoaded || !canZoomOut" size="large" link :icon="Minus" @click="zoomOut" />
  </div>
</template>

<script setup lang="ts">
import { ref, inject } from "vue";
import { Plus, Minus } from "@px-ui/icons-vue";

import useScale from "@/views/all/visual/template/hooks/useScale";

defineOptions({
  name: "Scale"
});

const scale = inject("scale", ref(1));
const middleComp = inject("middleComp", ref([]));
const updateScale = inject("updateScale", () => {});

const { imgLoaded, canZoomIn, canZoomOut, zoomIn, zoomOut, applyScale } = useScale(middleComp, scale, updateScale);
</script>

<style lang="scss" scoped></style>
